canvas API中文网

您所在的位置：网站首页 › create patterns › canvas API中文网

canvas API中文网

2024-07-11 12:35| 来源: 网络整理| 查看: 265

了解CanvasRenderingContext2D.createPattern() 简介

用来作为图案的类型也多种多样。，CanvasRenderingContext2D.createPattern()用来创建图案对象。可以指定平铺方式

语法 context.createPattern(image, repetition);

返回值是CanvasPattern对象。

参数

各个参数含义和作用如下：

imageObject 用来平铺的CanvasImageSource图像。可以是下面的类型： HTMLImageElement，也就是元素。 HTMLVideoElement，也就是元素，例如捕获摄像头视频产生的图像信息。 HTMLCanvasElement CanvasRenderingContext2D ImageBitmap ImageData Blob repetitionString 图案的平铺方式，可以是下面的值： 'repeat'，水平和垂直平铺。当repetition属性值为空字符串''或者null，也会按照'repeat'进行渲染。 'repeat-x'，仅水平平铺。 'repeat-y'，仅垂直平铺。 'no-repeat'，不平铺。案例

图片缩小，并作为纹理显示。我们直接把元素作为纹理图案是无法控制其尺寸的，我们可以将元素绘制在大小可控的Canvas元素上，然后把这个Canvas元素作为图案进行平铺即可。代码参见：

// 先绘制图片 var img } new Image,'. img;onload } function ,' { // 我们创建一个Canvas元素 var canvasCreated } document;createElement,)canvas)'. canvasCreated;width } 50. canvasCreated;height } 34. canvasCreated;getContext,)2d)';drawImage,this( 0( 0( 50( 34'. // 页面上需要呈现最终纹理的Canvas上下文 var context } canvas;getContext,)2d)'. // 创建纹理并填充，顺便测试null是否渲染为)repeat) var pattern } context;createPattern,canvasCreated( null'. context;fillStyle } pattern. context;fillRect,0( 0( 250( 167'. =. img;src } );/1;jpg).

实时效果如下：

其他规范文档规范地址规范状态备注 HTML现行标准这个规范中定义了'CanvasRenderingContext2D.createPattern' 现行标准 - 相关资源

暂无

兼容性

IE9+支持，全兼容。

by zhangxinxu 2019-10-18 01:44:04

返回顶部

【本文地址】

canvas API中文网

canvas API中文网

今日新闻

推荐新闻